<template>

  <!-- 交易详情表单 -->
  <el-form label-width="110px">

    <!-- ID -->
    <el-form-item label="ID">
      <div class="detail">&nbsp; {{ this.tranDetail.id }}</div>
    </el-form-item>

    <!-- 交易流水号 -->
    <el-form-item label="交易流水号">
      <div class="detail">&nbsp; {{ this.tranDetail.tranNo }}</div>
    </el-form-item>

    <!-- 负责人 -->
    <el-form-item label="负责人">
      <div class="detail">&nbsp; {{ this.tranDetail.ownerDO.name }}</div>
    </el-form-item>

    <!-- 客户名称 -->
    <el-form-item label="客户名称">
      <div class="detail">&nbsp; {{ this.tranDetail.clueDO.fullName }}</div>
    </el-form-item>

    <!-- 客户称呼 -->
    <el-form-item label="客户称呼">
      <div class="detail">&nbsp; {{ this.tranDetail.appellationDO.typeValue }}</div>
    </el-form-item>

    <!-- 手机 -->
    <el-form-item label="手机">
      <div class="detail">&nbsp; {{ this.tranDetail.clueDO.phone }}</div>
    </el-form-item>

    <!-- 微信 -->
    <el-form-item label="微信">
      <div class="detail">&nbsp; {{ this.tranDetail.clueDO.weixin }}</div>
    </el-form-item>

    <!-- qq -->
    <el-form-item label="qq">
      <div class="detail">&nbsp; {{ this.tranDetail.clueDO.qq }}</div>
    </el-form-item>

    <!-- 邮箱 -->
    <el-form-item label="邮箱">
      <div class="detail">&nbsp; {{ this.tranDetail.clueDO.email }}</div>
    </el-form-item>

    <!-- 购买产品 -->
    <el-form-item label="购买产品">
      <div class="detail">&nbsp; {{ this.tranDetail.productDO.name }}</div>
    </el-form-item>

    <!-- 交易金额 -->
    <el-form-item label="交易金额">
      <div class="detail">&nbsp; {{ this.tranDetail.money }}</div>
    </el-form-item>

    <!-- 是否贷款 -->
    <el-form-item label="是否贷款">
      <div class="detail">&nbsp; {{ this.tranDetail.needLoanDO.typeValue }}</div>
    </el-form-item>

    <!-- 交易阶段 -->
    <el-form-item label="交易阶段">
      <div class="detail">&nbsp; {{ this.tranDetail.stageDO.typeValue }}</div>
    </el-form-item>

    <!-- 交易描述 -->
    <el-form-item label="交易描述">
      <div class="detail">&nbsp; {{ this.tranDetail.description }}</div>
    </el-form-item>

    <!-- 预计成交日期 -->
    <el-form-item label="预计成交日期">
      <div class="detail">&nbsp; {{ this.tranDetail.expectedDate }}</div>
    </el-form-item>

    <!-- 下次联系时间 -->
    <el-form-item label="下次联系时间">
      <div class="detail">&nbsp; {{ this.tranDetail.nextContactTime }}</div>
    </el-form-item>

    <!-- 创建者 -->
    <el-form-item label="创建者">
      <div class="detail">&nbsp; {{ this.tranDetail.createByDO.name }}</div>
    </el-form-item>

    <!-- 创建日期 -->
    <el-form-item label="创建日期">
      <div class="detail">&nbsp; {{ this.tranDetail.createTime }}</div>
    </el-form-item>

    <!-- 编辑者 -->
    <el-form-item label="编辑者">
      <div class="detail">&nbsp; {{ this.tranDetail.editByDO.name }}</div>
    </el-form-item>

    <!-- 编辑日期 -->
    <el-form-item label="编辑日期">
      <div class="detail">&nbsp; {{ this.tranDetail.editTime }}</div>
    </el-form-item>

  </el-form>

  <!-- 交易备注表单 -->
  <el-form label-width="110px" :model="this.tranRemarkQuery" :rules="tranRemarkRules" ref="tranRemarkRefForm">

    <!-- 填写备注 -->
    <el-form-item label="填写备注" prop="noteContent">
      <el-input v-model.trim="this.tranRemarkQuery.noteContent"
                type="textarea"
                :rows="6" />
    </el-form-item>

    <!-- 联系方式 -->
    <el-form-item label="联系方式" prop="noteWay">
      <el-select v-model="this.tranRemarkQuery.noteWay" placeholder="请选择联系方式">
        <el-option v-for="noteWay in this.noteWayOptions"
                   :key="noteWay.id"
                   :label="noteWay.typeValue"
                   :value="noteWay.id" />
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="tranRemarkSubmit()">提交</el-button>
      <el-button @click="goBack()">返回</el-button>
    </el-form-item>

  </el-form>

  <!-- 交易备注列表 -->
  <!-- :data="tranRemarkList"  单向绑定表格数据 -->
  <el-table
      :data="tranRemarkList"
      style="width: 100%">

    <!-- type="index"  序号以1递增 -->
    <el-table-column type="index" label="序号" width="80px" />
    <el-table-column property="noteWayDO.typeValue" label="联系方式" width="120" />
    <el-table-column property="noteContent" label="备注" width="380" />
    <el-table-column property="createTime" label="联系时间" />
    <el-table-column property="createByDO.name" label="联系者" />
    <el-table-column property="editTime" label="编辑时间" />
    <el-table-column property="editByDO.name" label="编辑者" />
    <el-table-column label="操作">
      <!-- 作用域插槽 -->
      <template #default="scope">
        <!-- scope.row     获取当前行上的数据对象 -->
        <el-button type="success" @click="edit(scope.row)">编辑</el-button>
        <!-- scope.row.id  获取当前行上数据对象的id -->
        <el-button type="danger"  @click="remove(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页功能 -->
  <!--
      layout="prev, pager, next"  组件布局，子组件名用逗号分隔  prev, pager, next, jumper, ->, total
      @prev-click="toPage" 点击上一页触发函数
      @next-click="toPage" 点击下一页触发函数
      @current-change="toPage"  当前页发生改变时触发函数
      注意：这里的函数不要加括号，element-plus会自动传递一个参数（当前页数）
  -->
  <el-pagination
      background
      layout="prev, pager, next"
      :page-size="this.pageSize"
      :total="this.total"
      @prev-click="toPage"
      @next-click="toPage"
      @current-change="toPage"/>

  <!-- 编辑交易备注的弹窗（对话框） -->
  <!--
    v-model                值为true时，显示对话框，false隐藏对话框
    center                 内容居中
    draggable              可拖拽的对话框
    :close-on-click-modal  是否可以通过点击对话框外的页面关闭对话框
    :destroy-on-close      对话框关闭时，是否销毁其中元素（例如：验证规则的提示信息）
    :show-close            是否显示关闭（×号）按钮
  -->
  <el-dialog
      v-model="editTranRemarkDialogVisible"
      title="编辑交易备注"
      width="55%"  center  draggable
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :show-close="false">

    <!-- :model       表单绑定的数据 -->
    <!-- label-width  表单整体距离左侧的宽度 -->
    <!-- :rules       绑定验证规则 -->
    <!-- ref          表单提交之前验证表单的验证规则 -->
    <el-form :model="tranRemarkQuery" label-width="110px" :rules="editTranRemarkRules" ref="editTranRemarkRefForm">
      <!-- 备注 -->
      <el-form-item label="备注" prop="noteContent">
        <el-input type="textarea" :rows="6" v-model.trim="tranRemarkQuery.noteContent" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="editTranRemarkSubmit()">提交</el-button>
        <el-button @click="editTranRemarkDialogVisibleClose()">关闭</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script>
import {doDelete, doGet, doPost, doPut} from "../http/httpRequest.js";
import {messageConfirm, messageTip} from "../util/util.js";

  export default {
    name: "TranDetailView",

    // 注入父组件的函数
    inject: ['reload'],

    data() {
      return {
        // 交易详情对象
        tranDetail: {
          ownerDO: {},        // 负责人
          clueDO: {},         // 线索（包含了客户的相关信息）
          appellationDO: {},  // 称呼
          productDO: {},      // 产品
          needLoanDO: {},     // 贷款
          stageDO: {},        // 交易阶段
          createByDO: {},     // 创建者
          editByDO: {}        // 编辑者
        },

        // 交易备注对象
        tranRemarkQuery: { },

        // 联系方式下拉选项
        noteWayOptions: [],

        // 交易备注表单验证规则
        tranRemarkRules: {
          // 备注
          noteContent: [
            { required: true, message: '请输入备注内容', trigger: 'blur' },
            { min: 5, max: 255, message: '备注内容字数在5-255之间', trigger: 'blur' }
          ],
          // 联系方式
          noteWay: [
            { required: true, message: '请选择联系方式', trigger: 'blur' }
          ]
        },

        // 交易备注列表
        tranRemarkList: [
          {
            noteWayDO: {},    // 联系方式
            createByDO: {},   // 创建者（联系者）
            editByDO: {}      // 编辑者
          }
        ],

        // 分页参数
        pageSize: 0,  // 每页记录条数
        total: 0,     // 总记录条数

        // 编辑交易备注对话框是否可见
        editTranRemarkDialogVisible: false,

        // 编辑备注表单验证规则
        editTranRemarkRules: {
          // 备注
          noteContent: [
            { required: true, message: '请输入备注内容', trigger: 'blur' },
            { min: 5, max: 255, message: '备注内容字数在5-255之间', trigger: 'blur' }
          ]
        }
      }
    },

    // 钩子函数，页面渲染完成后自动执行
    mounted() {
      // 加载交易详情
      this.loadTranDetail();

      // 加载联系方式下拉选项
      this.loadNoteWayOptions();

      // 加载交易备注列表
      this.loadTranRemarkList(1);
    },

    methods: {
      // 加载交易详情
      loadTranDetail() {
        // 从路由路径上获取交易id
        let id = this.$route.params.id;
        // 向后端发送请求
        doGet("/api/tran/detail/" + id, { }).then( (resp) => {
          if (resp.data.code === 200) {
            // 将后端返回的数据赋值给交易详情对象
            this.tranDetail = resp.data.data;

            // 给引用数据类型变量为null的属性赋空对象，避免控制台报错
            for (let field in this.tranDetail) {
              if (!this.tranDetail[field]) {
                this.tranDetail[field] = { };
              }
            }
          } else {
            messageTip("交易详情加载失败", "error");
          }
        })
      },

      // 加载联系方式下拉选项
      loadNoteWayOptions() {
        // 向后端发送请求
        doGet("/api/dicValue/loadNoteWay", { }).then( (resp) => {
          if (resp.data.code === 200) {
            this.noteWayOptions = resp.data.data;
          } else {
            messageTip("联系方式加载失败", "error");
          }
        })
      },

      // 提交按钮
      tranRemarkSubmit() {
        // 验证表单规则
        this.$refs.tranRemarkRefForm.validate( (isValid) => {
          if (isValid) {
            // 向后端发送请求
            doPost("/api/tran/remark/add", {
              // 从路由路径获取交易id
              tranId: this.$route.params.id,
              // 备注内容
              noteContent: this.tranRemarkQuery.noteContent,
              // 联系方式
              noteWay: this.tranRemarkQuery.noteWay,
            }).then( (resp) => {
              if (resp.data.code === 200) {
                messageTip("提交成功", "success");
                // 刷新页面
                this.reload();
              } else {
                messageTip("提交失败", "error");
              }
            })
          }
        })
      },

      // 返回按钮
      goBack() {
        this.$router.go(-1);
      },

      // 加载交易备注列表
      loadTranRemarkList(current) {
        // 向后端发送请求
        doGet("/api/tran/remark/list", {
          // 要查询第几页
          current: current
        }).then( (resp) => {
          if (resp.data.code === 200) {
            // 备注列表
            this.tranRemarkList = resp.data.data.list;
            // 分页参数
            this.pageSize = resp.data.data.pageSize;
            this.total = resp.data.data.total;
          } else {
            messageTip("交易备注列表加载失败", "error");
          }
        })
      },

      // 编辑按钮
      edit(tranRemark) {
        // 获取备注id
        this.tranRemarkQuery.id = tranRemark.id;
        // 将备注内容显示到对话框
        this.tranRemarkQuery.noteContent = tranRemark.noteContent;

        // 弹出对话框
        this.editTranRemarkDialogVisible = true;
      },

      // 编辑备注 提交按钮
      editTranRemarkSubmit() {
        // 验证编辑备注表单规则
        this.$refs.editTranRemarkRefForm.validate( (isValid) => {
          // 判断验证是否通过
          if (isValid) {
            // 向后端发送请求
            doPut("/api/tran/remark/edit", {
              id: this.tranRemarkQuery.id,
              noteContent: this.tranRemarkQuery.noteContent
            }).then( (resp) => {
              if (resp.data.code === 200) {
                messageTip("编辑成功", "success");
                // 刷新页面
                this.reload();
              } else {
                messageTip("编辑失败", "error");
              }
            })
          }
        })
      },

      // 编辑备注 关闭按钮
      editTranRemarkDialogVisibleClose() {
        // 清空备注对象
        this.tranRemarkQuery = { };

        // 关闭对话框
        this.editTranRemarkDialogVisible = false;
      },

      // 删除（逻辑删除）按钮
      remove(id) {
        // 弹出确认框
        messageConfirm("确认删除这条备注吗？").then(() => {
          // 向后端发送请求
          doDelete("/api/tran/remark/remove/" + id, { }).then( (resp) => {
            if (resp.data.code === 200) {
              messageTip("删除成功", "success");
              // 刷新页面
              this.reload();
            } else {
              messageTip("删除失败", "error");
            }
          })
        }).catch(() => {
          messageTip("取消删除", "warning");
        })
      },

      // 分页函数
      toPage(current) {
        this.loadTranRemarkList(current);
      }
    }
  }
</script>

<style scoped>

  /* 交易详情信息 */
  .detail {
    height: 30px;
    width: 100%;
    background-color: #f6f7fb;    /* 背景色 */
    padding-left: 2px;            /* 左侧内边距 */
    border: 1px solid #e6e7eb;    /* 1px 边框宽度， solid 实线边框， #e6e7eb 边框颜色 */
    border-radius: 4px;           /* 边框角的弧度 */
  }

  /* 交易备注列表 */
  .el-table {
    margin-top: 20px;  /* 上侧外边距 */
  }

  /* 分页栏 */
  .el-pagination {
    margin-top: 20px;  /* 上侧外边距 */
  }

</style>

